<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>背景图片填充文本效果</title>
<style type="text/css">
*{ padding:0; margin:0;}
.wrap{ width:100px; margin:200px auto;
	-webkit-transform-origin:left top;
	        transform-origin:left top;
	-webkit-animation:mymove1 1s linear infinite;
            animation:mymove1 1s linear infinite;
}
@keyframes mymove1{
  0%{
    -webkit-transform:rotateX(0deg);
  }
  50%{
  	-webkit-transform:rotateX(180deg);
  }
  100%{
  	-webkit-transform:rotateX(360deg);
  }
}
@-webkit-keyframes mymove1{
  0%{
  	-webkit-transform:rotateX(0deg);
  }
  50%{
  	-webkit-transform:rotateX(180deg);
  }
  100%{
  	-webkit-transform:rotateX(360deg);
  }
}
.box1{ width:100px; height:100px; background:red;}
.box2{ width:100px; height:100px; background:green;}

</style>
</head>
<body>
<div class="wrap">
	<div class="box1"></div>
	<div class="box2"></div>
</div>
</body>
</html>